<template>
    <div class="navbar">
      <router-link to="/">主页</router-link>
      <router-link v-if="!isAuthenticated" to="/login">登录</router-link>
      <router-link v-if="!isAuthenticated" to="/signup">注册</router-link>
  
      <!-- 根据角色显示不同链接 -->
      <router-link v-if="isAuthenticated && role === 'User'" to="/user">User Home</router-link>
      <router-link v-if="isAuthenticated && role === 'Courier'" to="/courier">Courier Home</router-link>
      <router-link v-if="isAuthenticated && role === 'Stuff'" to="/stuff">Stuff Home</router-link>
      <router-link v-if="isAuthenticated && role === 'Admin'" to="/admin">Admin Home</router-link>
      <button v-if="isAuthenticated" @click="logout">Logout</button>
    </div>
  </template>
  
  <script>
  import { mapState, mapMutations } from 'vuex';
  
  export default {
    computed: {
      ...mapState(['isAuthenticated', 'role'])
    },
    methods: {
      ...mapMutations(['setAuth']),
      logout() {
        this.setAuth({ isAuthenticated: false, role: null });
        this.$router.push('/login');
      }
    }
  };
  </script>
  
  <style>
  .navbar {
    display: flex;
    gap: 10px;
    padding: 10px;
    background-color: #f0f0f0;
  }
  button {
    cursor: pointer;
  }
  </style>
  